<template>
  <div class="custom-page udi-info-list">
    <div class="upload">
      <a-upload
        name="file"
        :multiple="true"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        :customRequest="customRequest"
        :showUploadList="false"
      >
        <a-button> <a-icon type="upload" /> 上传UDI </a-button>
      </a-upload>
    </div>
    <div v-if="udi" class="info-wrap">
      <div class="info-result">
        <div class="" style="color: #666">
          详情结果：<span style="color: red">{{ udi.cpmctymc }}（{{ udi.zxxsdycpbs }}）</span>
        </div>
      </div>
      <a-collapse v-model="activeKey">
        <template #expandIcon="props">
          <a-icon v-if="!props.isActive" type="plus" />
          <a-icon v-else type="minus" />
        </template>
        <a-collapse-panel key="1" header="产品标识基本信息">
          <div>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="4"> 最小销售单元产品标识： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.zxxsdycpbs }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 产品标识编码体系名称： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.cpbsbmtxmc }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 产品标识发布日期： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.cpbsfbrq }} </a-col>
            </a-row>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="4"> 最小销售单元中使用单元的数量： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.zxxsdyzsydydsl }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 使用单元产品标识： </a-col>
              <a-col class="udi-value" :span="4"> </a-col>
              <a-col class="udi-value udi-title" :span="4"> 是否有本体标识： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.sfybtzjbs }} </a-col>
            </a-row>
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="产品基本信息">
          <div>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="4"> 产品名称/通用名称： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.cpmctymc }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 商品名称： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.spmc }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 型号规格/包装规格： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.ggxh }} </a-col>
            </a-row>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="4"> 是否为包装/组套类产品： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.sfwblztlcp }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 产品描述： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.cpms }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 产品货号或编号： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.cphhhbh }} </a-col>
            </a-row>

            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="4"> 原器械目录代码： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.yflbm }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 器械类别： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.qxlb }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 分类编码： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.flbm }} </a-col>
            </a-row>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="4"> 医疗器械注册人/备案人员名称： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.ylqxzcrbarmc }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 医疗器械注册人/备案人英文名称： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.ylqxzcrbarywmc }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 统一社会信息代码： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.tyshxydm }} </a-col>
            </a-row>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="4"> 注册证编号或者备案凭证编号： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.zczbhhzbapzbh }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 医保耗材分类编码： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.ybbm }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 产品类别： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.cplb }} </a-col>
            </a-row>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="4"> 磁共振（MR）安全相关信息： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.cgzmraqxgxx }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 是否标记为一次性使用： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.sfbjwycxsy }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 最大重复使用次数： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.zdcfsycs }} </a-col>
            </a-row>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="4"> 是否为无菌包装： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.sfwwjbz }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 使用前是否需要进行灭菌： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.syqsfxyjxmj }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 灭菌方式： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.mjfs }} </a-col>
            </a-row>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="4"> 其他信息的网址链接： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.qtxxdwzlj }} </a-col>
              <a-col class="udi-value" :span="4"> </a-col>
              <a-col class="udi-value" :span="4"> </a-col>
              <a-col class="udi-value" :span="4"> </a-col>
              <a-col class="udi-value" :span="4"> </a-col>
            </a-row>
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="3" header="生产标识信息">
          <div>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="6"> 生产标识是否包含批号： </a-col>
              <a-col class="udi-value" :span="6"> {{ udi.scbssfbhph }} </a-col>
              <a-col class="udi-value udi-title" :span="6"> 生产标识是否包含序列号： </a-col>
              <a-col class="udi-value" :span="6"> {{ udi.scbssfbhxlh }} </a-col>
            </a-row>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="6"> 生产标识是否包含生产日期： </a-col>
              <a-col class="udi-value" :span="6"> {{ udi.scbssfbhscrq }} </a-col>
              <a-col class="udi-value udi-title" :span="6"> 生产标识是否包含失效日期： </a-col>
              <a-col class="udi-value" :span="6"> {{ udi.scbssfbhsxrq }} </a-col>
            </a-row>
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="4" header="包装标识信息">
          <div>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="6"> 包装产品标识 </a-col>
              <a-col class="udi-value udi-title" :span="6"> 产品包装级别 </a-col>
              <a-col class="udi-value udi-title" :span="6"> 本级包装内包含小一级相同产品标识的包装数量 </a-col>
              <a-col class="udi-value udi-title" :span="6"> 包含内含小一级包装产品标识 </a-col>
            </a-row>
            <a-row type="flex">
              <a-col class="udi-value" :span="6"> </a-col>
              <a-col class="udi-value" :span="6"> </a-col>
              <a-col class="udi-value" :span="6"> </a-col>
              <a-col class="udi-value" :span="6"> </a-col>
            </a-row>
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="5" header="储存或操作信息">
          <div>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="8"> 储存或操作条件 </a-col>
              <a-col class="udi-value udi-title" :span="8"> 值范围 </a-col>
              <a-col class="udi-value udi-title" :span="8"> 计量单位 </a-col>
            </a-row>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="8"> 特殊储存或操作条件： </a-col>
              <a-col class="udi-value" :span="8"> </a-col>
              <a-col class="udi-value" :span="8"> </a-col>
            </a-row>
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="6" header="临床使用尺寸信息">
          <div>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="8"> 临床使用尺寸类型 </a-col>
              <a-col class="udi-value udi-title" :span="8"> 尺寸值 </a-col>
              <a-col class="udi-value udi-title" :span="8"> 尺寸单位 </a-col>
            </a-row>
            <a-row type="flex">
              <a-col class="udi-value" :span="8"> </a-col>
              <a-col class="udi-value" :span="8"> </a-col>
              <a-col class="udi-value" :span="8"> </a-col>
            </a-row>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="8"> 特殊尺寸说明： </a-col>
              <a-col class="udi-value" :span="16"> 无 </a-col>
            </a-row>
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="7" header="版本信息">
          <div>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="4"> 主键编号： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.deviceRecordKey }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 公开的版本号： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.versionNumber }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 版本的发布日期： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.versionTime }} </a-col>
            </a-row>
            <a-row type="flex">
              <a-col class="udi-value udi-title" :span="4"> 版本的状态： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.versionStauts }} </a-col>
              <a-col class="udi-value udi-title" :span="4"> 变更备注： </a-col>
              <a-col class="udi-value" :span="4">
                产品描述部分与注册证保持一致，补充货架有效期的描述；将20位医保编码变更为27位医保医用耗材分类与代码。
              </a-col>
              <a-col class="udi-value udi-title" :span="4"> 退市日期： </a-col>
              <a-col class="udi-value" :span="4"> {{ udi.tsrq }} </a-col>
            </a-row>
          </div>
        </a-collapse-panel>
        <!-- <a-collapse-panel key="8" header="企业联系信息">
          <div v-for="l,i in udi.companyContactList">
            <a-row>
              <a-col class="udi-value udi-title" :span="6"> 联系人邮箱 </a-col>
              <a-col class="udi-value udi-title" :span="6"> 联系人手机 </a-col>
              <a-col class="udi-value udi-title" :span="6"> 联系人电话 </a-col>
              <a-col class="udi-value udi-title" :span="6"> 联系人传真 </a-col>
            </a-row>
            <a-row>
              <a-col class="udi-value" :span="6"> {{ l.qylxryx }} </a-col>
              <a-col class="udi-value" :span="6">  </a-col>
              <a-col class="udi-value" :span="6"> 4234234234 </a-col>
              <a-col class="udi-value" :span="6"> 423423423 </a-col>
            </a-row>
          </div>
        </a-collapse-panel> -->
      </a-collapse>
    </div>
  </div>
</template>

<script>
import { udiAdd } from '@/api/udi.js'
export default {
  data() {
    return {
      activeKey: 1,
      udi: null,
    }
  },
  methods: {
    customRequest(e) {
      const { file } = e
      const self = this
      const reader = new FileReader()
      reader.readAsText(file)
      reader.onload = async function () {
        try {
          self.udi = JSON.parse(this.result)
          const r = await udiAdd(self.udi)
          if (r.code == 200) {
            self.$message.success('上传成功')
          } else {
            self.$message.error(r.message)
          }
        } catch (_) {
          self.$message.error('udi格式错误')
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.udi-info-list {
  .info-result {
    padding: 8px 10px;
    background-color: #fcf2f2;
    margin: 14px 0;
    font-weight: 650;
  }
  .udi-value {
    padding: 10px 12px;
    line-height: 20px;
    min-height: 50px;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .udi-title {
    background-color: #edf4f7;
  }
}
</style>